<template>
	<view class="module flex_ZC">
		<NavTitle :title="title" :backgroundColor='backgroundColor' @leftClick="leftClick"></NavTitle>
		<view class="information_txt flex_Z">
			<text class="f48 c3 fw7">上传营业执照信息</text>
		</view>

		<view class="content padb30 flex_Z">
			<view class="  flex_Z">
				<view class="flex_dq">
					<text class="f28 c3 fw5">上传营业执照</text>
					<text class="tishi"> *</text>
				</view>
				<text class="content_tip">上传完成后自动识别</text>
			</view>
			<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" :maxCount="1"
				:maxSize="6 *1024 *1024" @oversize="overSize" width="320" height="190">
				<view class="content_r flex_c">
					<image :src="baseUrl +'/static/image/hyzz.png'" mode="aspectFit"></image>
				</view>
			</u-upload>
		</view>
		<view class="content flex_Z">
			<view class="flex_dq">
				<text class="f28 c3 fw5">名称</text>
				<text class="tishi"> *</text>
			</view>
			<u--input placeholder="请输入执照名称" fontSize="14" color="#666666" border="none "
				v-model.trim="ocrLicenseInfo.license_name" clearable></u--input>
		</view>
		<view class="content flex_Z">
			<view class="flex_dq">
				<text class="f28 c3 fw5">统一社会信用代码</text>
				<text class="tishi"> *</text>
			</view>
			<u--input placeholder="请输入信用代码" fontSize="14" color="#666666" border="none "
				v-model.trim="ocrLicenseInfo.social_credit_code" clearable></u--input>
		</view>
		<view class="content flex_Z">
			<view class="flex_dq">
				<text v-if="company_type=='sole_proprietorship'" class="f28 c3 fw5">经营者</text>
				<text v-if="company_type=='ordinary'" class="f28 c3 fw5">法定代表人</text>
				<text  class="tishi"> *</text>
			</view>
			<u--input placeholder="请输入法人姓名" fontSize="14" color="#666666" border="none "
				v-model.trim="ocrLicenseInfo.legal_person_name" clearable></u--input>
		</view>
		<view class="content flex_Z">
			<view class="flex_dq">
				<text class="f28 c3 fw5">注册日期</text>
				<text class="tishi"> *</text>
			</view>
			<view class="term_box flex_dq">
				<text v-if="!endTerm" class="change_state ">上传自动识别</text>
				<text :class="endTerm?'active':'change_state'">{{ocrLicenseInfo.business_term_start}}</text>
				<text v-if="ocrLicenseInfo.business_term_end">-</text>
				<text :class="endTerm?'active':'change_state'" v-if="ocrLicenseInfo.business_term_end"> 
					{{ocrLicenseInfo.business_term_end}}</text>
			</view>
		</view>
		<view class="content flex_Z">
			<view class="flex_dq">
				<text class="f28 c3 fw5">注册地区</text>
				<text class="tishi"> *</text>
			</view>
			<view class="describe">
				<image :src="baseUrl + '/static/ymimage/remind.png'" class="remind" mode="aspectFill"></image>
				<text class="">注册地区需与营业执照上的住所或经营场所相匹配</text>
			</view>
			<view class="xuanze flex_ld" @click="openAddress">
				<text :class=" areaState?'active':'change_state'">{{addressAll}}</text>
				<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
			</view>
		</view>

		<view class="btns flex_ld" >
			<text class="sign_out" @click="leftClick">上一步</text>
			<text class="service" @click="$u.debounce(nextStep, 300)">下一步</text>
		</view>
		<view class="empty3"></view>

		<atAddress ref="scroll" :level="3" @change='chooseSuccess'></atAddress>
	</view>
</template>

<script>
	// import {
	// 	commonArea
	// } from "../../api/other.js"
	import UploadFile from '../../common/upload'
	import {
		baseURL
	} from "../../utils/request.js"
	import {
		aiBusinessLicense
	} from "../../api/join.js"
	import {
		settledTwoSave
	} from "@/api/settled.js"
	export default {
		data() {
			return {
				title: '上传营业执照',
				backgroundColor: '',
				baseUrl: this.$imageBaseUrl,
				// imgurl: '', //图片
				addressAll: '请选择所在区域', //合并地址
				areaState: false, //是否选择地区
				endTerm: false, //开始营业期限
				modifyState: false, //是否通过修改按钮进入
				seller_id:'',//商户id
				company_type:"",
				fileList1: [], //已上传的文件列表
				ocrLicenseInfo: {}, //ocr识别信息
				halfRoadRoute: [], //营业执照照片

			}
		},

		onLoad(options) {
			
			console.log(options.data);
			if(options.data){
				let data = JSON.parse(options.data)
				this.seller_id = data.id
				this.company_type = data.company_type
				if(data.modifyState){
					this.modifyState = data.modifyState
					this.ymDetails = JSON.parse(uni.getStorageSync('ymShopDetails')) || {}
					this.seller_id = this.ymDetails.id
					let seller_auth = this.ymDetails.seller_auth
					this.endTerm = true
					let url = this.getPathAfterCom(seller_auth.business_license)
					this.halfRoadRoute.push(url)
					const aaa = {
						license_name:seller_auth.license_name,
						social_credit_code:seller_auth.social_credit_code,
						legal_person_name:seller_auth.legal_person_name,
						business_term_start:seller_auth.business_term_start,
						business_term_end:seller_auth.business_term_end,
						company_address:seller_auth.company_address,
						province_id:seller_auth.province_id,
						city_id:seller_auth.city_id,
						county_id:seller_auth.county_id,
					}
					this.ocrLicenseInfo = aaa;
					this.addressAll = seller_auth.company_address
					this.fileList1.push({
						'thumb':seller_auth.business_license,
						'status': 'success'
					})
				}
			}
			if(options.id){
				this.seller_id = options.id
			}	
			// this.applicationDetails()
		},
		onShow() {
			// if (uni.getStorageSync('ocrLicenseInfo')) {
			// 	this.endTerm = true
			// 	this.ocrLicenseInfo = uni.getStorageSync('ocrLicenseInfo')
			// 	this.addressAll = uni.getStorageSync('ocrLicenseInfo').addressAll
			// }
		},
		methods: {
			
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/cloudCatIndex'
					})
				}
			},
			//打开地址选择器
			openAddress() {
				this.$refs.scroll.open()
			},
			//地址选择成功
			chooseSuccess(e) {
				console.log('所选择的地址信息:', e)
				this.addressAll = ''
				this.areaState = true
				let value = e.value;
				this.ocrLicenseInfo.province_id = e.value[0].id
				this.ocrLicenseInfo.city_id = e.value[1].id
				this.ocrLicenseInfo.county_id = e.value[2].id
				this.addressAll = value.map(item=>item.name).join(' ')
			},
			// 截取半路经
			getPathAfterCom(url) {
				const parts = url.split('.com');
				console.log(parts);
				return parts.length > 1 ? parts[1] : '';
			},
			// 超出提示
			overSize(event) {
				// console.log(event);
				uni.$u.toast('图片过大,请重新上传!')
			},

			// 删除图片
			deletePic(event) {
				console.log(event);
				this[`fileList${event.name}`].splice(event.index, 1);
				this.halfRoadRoute.splice(event.index, 1)
				console.log(this[`fileList${event.name}`],this.halfRoadRoute);
			},
			// 新增图片
			async afterRead(event) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				const upload = new UploadFile('yyzh',true)
				await upload.afterRead(event).then(res=>{
					console.log(res);
					this[`fileList${event.name}`] = res.filelist
					this.halfRoadRoute = this.halfRoadRoute.concat(res.halfRoadRoute)
					this.ocrLicenseInfo = {...this.ocrLicenseInfo,...res.ocrData}
					this.endTerm = true
					uni.hideLoading();
				})
			},
			

			// 规则校验
			ruleValidation() {
				console.log(this.halfRoadRoute.length);
				if (this.halfRoadRoute.length<=0) {
					uni.$u.toast('请上传营业执照');
					return false;
				}
				if (uni.$u.test.isEmpty(this.ocrLicenseInfo.license_name)) {
					uni.$u.toast('请输入执照名称');
					return false;
				}
				if (uni.$u.test.isEmpty(this.ocrLicenseInfo.social_credit_code)) {
					uni.$u.toast('请输入信用代码');
					return false;
				}
				if (uni.$u.test.isEmpty(this.ocrLicenseInfo.legal_person_name)) {
					uni.$u.toast('请输入法人姓名');
					return false;
				}
				if (uni.$u.test.isEmpty(this.ocrLicenseInfo.business_term_start)) {
					uni.$u.toast('营业期限不能为空');
					return false;
				}
				if (uni.$u.test.isEmpty(this.ocrLicenseInfo.province_id)) {
					uni.$u.toast('请选择所在地区');
					return false;
				}
				return true;
			},

			// 下一步
			nextStep() {
				
				
				if (this.ruleValidation()) {
					uni.showLoading({
						title: '',
						mask: true
					});
					let data = {
						seller_id:this.seller_id,
						business_license:this.halfRoadRoute.join(','),
						company_address:this.addressAll,
						...this.ocrLicenseInfo,
						mask:1
					}
					settledTwoSave(data).then(res=>{
						console.log(res)
						const data = {
							id:this.seller_id
						}
						if(this.modifyState){
							data.modifyState = true
						}
						if(res.code == 1){
							uni.navigateTo({
								url:'/pageYm/ymJoin/joinApplyThree?data=' + JSON.stringify(data),
								success() {
									uni.hideLoading()
								}
							})
						}
					})
					
				}
			},
			// 确认修改
			confirmModify() {
				// if (this.ruleValidation()) {
				// 	this.$set(this.ocrLicenseInfo, "image", this.halfRoadRoute);
				// 	console.log(this.ocrLicenseInfo);
				// 	uni.setStorageSync('ocrLicenseInfo', this.ocrLicenseInfo)
				// 	uni.setStorageSync('yyzzShow', true)
				// 	uni.navigateBack({
				// 		delta: 1
				// 	})
				// }
			}
		},
		// 页面滚动
		onPageScroll: function(e) {
			const scrollTop = e.scrollTop; // 获取页面滚动位置
			// 根据滚动位置修改状态栏样式
			if (scrollTop > 20) {
				this.backgroundColor = '#ffffff';
			} else {
				this.backgroundColor = '';
			}
			// console.log("滚动距离为：" + e.scrollTop);
		},
	}
</script>

<style scoped>
	.module {
		width: 750rpx;
		margin: 0 auto;
	}
.module {
		width: 750rpx;
		margin: 0 auto;
		padding: 0 32rpx;
	}
	.describe {
		background: rgba(250, 110, 1, 0.1);
		border-radius: 10rpx;
		font-size: 22rpx;
		color: #FA6E01;
		margin: 24rpx 0;
		padding: 8rpx 16rpx;
		display: flex;
		align-items: center;
	}

	.remind {
		width: 22rpx;
		height: 22rpx;
		margin-right: 8rpx;
	}


	.information_txt {
		width: 686rpx;
		padding: 16rpx 0;
	}


	.content {
		width: 686rpx;
		box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
		margin: 30rpx 0 10rpx;
	}

	.content_tip {
		font-size: 20rpx;
		color: #999999;
		margin: 10rpx 0 20rpx;
	}

	.content_r {
		width: 690rpx;
		height: 390rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		margin: 0 auto;
	}

	.content_r>image {
		width: 588rpx;
		height: 360rpx;
	}

	.term_box {
		width: 686rpx;
		margin: 30rpx 0 20rpx;
	}

	.padb30 {
		padding-bottom: 30rpx;
	}

	.tishi {
		font-size: 28rpx;
		color: #FA6E01;
		margin-left: 6rpx;
	}

	.xuanze {
		padding: 10rpx 0 20rpx;
	}

	.btns {
		position: fixed;
		bottom: 0rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 690rpx;
		height: 150rpx;
		background: #f8f8f8;
	}

	.sign_out {
		width: 158rpx;
		height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		line-height: 88rpx;
		text-align: center;
		background: #FFFFFF;
		font-weight: 500;
		border-radius: 20rpx;
		border: 2rpx solid rgba(153, 153, 153, 0.18);
	}

	.service {
		width: 504rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.service2 {
		width: 690rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		text-align: center;
		background: #FFCC28;
		border-radius: 20rpx;
	}

	.change_state {
		font-size: 28rpx;
		color: #c0c4cc;
	}

	.active {
		font-size: 28rpx;
		color: #666666 !important;
	}

	/deep/.u-upload__wrap {
		margin: 0 auto !important;
	}

	/deep/.u-input__content {
		margin-left: -20rpx;
	}

	/deep/.u-upload__deletable {
		height: 24px !important;
		width: 24px !important;
	}

	/deep/.u-icon__icon {
		font-size: 30rpx !important;
		line-height: 30rpx !important;
	}
	/* #ifdef MP-ALIPAY */
	/deep/.u-input__content__field-wrapper__field{
		background: transparent!important;
	}
	/* #endif */
</style>